<template>
  <div>
    <div>
      <div
        id="hot1"
        :style="{ width: '100%', height: '600px' }"
        class="col-lg-4"
      ></div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-1">产品</h3>
        <h3 class="col-lg-2"></h3>
        <h3 class="col-lg-2 text-primary">{{ cateName[0] }}</h3>
      </div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-2">相比昨日</h3>
        <h3 class="col-lg-1"></h3>
        <h3 class="col-lg-2 text-success">{{ change[0] }}</h3>
      </div>
    </div>

    <div>
      <div
        id="hot2"
        :style="{ width: '100%', height: '600px' }"
        class="col-lg-4"
      ></div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-1">产品</h3>
        <h3 class="col-lg-2"></h3>
        <h3 class="col-lg-2 text-primary">{{ cateName[1] }}</h3>
      </div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-2">相比昨日</h3>
        <h3 class="col-lg-1"></h3>
        <h3 class="col-lg-2 text-success">{{ change[1] }}</h3>
      </div>
    </div>

    <div>
      <div
        id="hot3"
        :style="{ width: '100%', height: '600px' }"
        class="col-lg-4"
      ></div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-1">产品</h3>
        <h3 class="col-lg-2"></h3>
        <h3 class="col-lg-2 text-primary">{{ cateName[2] }}</h3>
      </div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-2">相比昨日</h3>
        <h3 class="col-lg-1"></h3>
        <h3 class="col-lg-2 text-success">{{ change[2] }}</h3>
      </div>
    </div>

    <div>
      <div
        id="hot4"
        :style="{ width: '100%', height: '600px' }"
        class="col-lg-4"
      ></div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-1">产品</h3>
        <h3 class="col-lg-2"></h3>
        <h3 class="col-lg-2 text-primary">{{ cateName[3] }}</h3>
      </div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-2">相比昨日</h3>
        <h3 class="col-lg-1"></h3>
        <h3 class="col-lg-2 text-success">{{ change[3] }}</h3>
      </div>
    </div>

    <div>
      <div
        id="hot5"
        :style="{ width: '100%', height: '600px' }"
        class="col-lg-4"
      ></div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-1">产品</h3>
        <h3 class="col-lg-2"></h3>
        <h3 class="col-lg-2 text-primary">{{ cateName[4] }}</h3>
      </div>
      <div class="row">
        <h3 class="col-lg-4"></h3>
        <h3 class="col-lg-2">相比昨日</h3>
        <h3 class="col-lg-1"></h3>
        <h3 class="col-lg-2 text-success">{{ change[4] }}</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateName: [],
      change: [],
      heart: [],
      option1: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "今日热度{value}",
              color: "auto",
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
      option2: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "今日热度{value}",
              color: "auto",
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
      option3: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "今日热度{value}",
              color: "auto",
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
      option5: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "今日热度{value}",
              color: "auto",
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
      option4: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "今日热度{value}",
              color: "auto",
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.axios
      .get("http://122.51.157.58:8081/api-service/getHotByBuyer?key=123456")
      .then((body) => {
        var result = body.data;
        for (
          var i = result.data.result.length - 1;
          i >= result.data.result.length - 5;
          i--
        ) {
          this.cateName.push(result.data.result[i].cateName);
          this.change.push(result.data.result[i].buyerHeatTrend);
          this.heart.push(result.data.result[i].buyerHeat);
        }

        this.option1.series[0].data[0].value = parseInt(
          parseInt(this.heart[0]) / 150
        );

        this.option2.series[0].data[0].value = parseInt(
          parseInt(this.heart[1]) / 150
        );

        this.option3.series[0].data[0].value = parseInt(
          parseInt(this.heart[2]) / 150
        );

        this.option4.series[0].data[0].value = parseInt(
          parseInt(this.heart[3]) / 150
        );

        this.option5.series[0].data[0].value = parseInt(
          parseInt(this.heart[4]) / 150
        );

        var chartDom = document.getElementById("hot1");
        var myChart = this.echarts.init(chartDom);
        myChart.setOption(this.option1);

        var chartDom = document.getElementById("hot2");
        var myChart = this.echarts.init(chartDom);
        myChart.setOption(this.option2);

        var chartDom = document.getElementById("hot3");
        var myChart = this.echarts.init(chartDom);
        myChart.setOption(this.option3);

        var chartDom = document.getElementById("hot4");
        var myChart = this.echarts.init(chartDom);
        myChart.setOption(this.option4);

        var chartDom = document.getElementById("hot5");
        var myChart = this.echarts.init(chartDom);
        myChart.setOption(this.option5);
      });
  },
};
</script>

<style scoped>
@import url("../../../static/css/style.css");
.align-center {
  text-align: center;
}
</style>